{% extends "base.html" %}

{% from "macros.html" import render_comment %}

{% block content %}
<div class="container">
    <div class="card couple-detail">
        <div class="couple-header">
            <div class="couple-side husband-side">
                <img src="{{ couple.husband_avatar or url_for('static', filename='images/default-avatar.png') }}" 
                     alt="{{ couple.husband_name }}" class="avatar large">
                <h2>{{ couple.husband_name }}</h2>
                <p class="info">{{ couple.husband_age }}岁</p>
                <p class="info">{{ couple.husband_occupation }}</p>
            </div>
            
            <div class="couple-center">
                <div class="marriage-info">
                    <p class="years">结婚{{ couple.marriage_years }}年</p>
                    <div class="vote-progress">
                        <div class="progress-bars">
                            <div class="progress-item">
                                <div class="progress stay">
                                    <div class="progress-bar" style="width: {{ (stay_votes / (stay_votes + divorce_votes) * 100) if (stay_votes + divorce_votes) > 0 else 0 }}%">
                                        <span class="progress-text">继续走下去 {{ stay_votes }}票</span>
                                    </div>
                                </div>
                            </div>
                            <div class="progress-item">
                                <div class="progress divorce">
                                    <div class="progress-bar" style="width: {{ (divorce_votes / (stay_votes + divorce_votes) * 100) if (stay_votes + divorce_votes) > 0 else 0 }}%">
                                        <span class="progress-text">和平分手 {{ divorce_votes }}票</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="couple-side wife-side">
                <img src="{{ couple.wife_avatar or url_for('static', filename='images/default-avatar.png') }}" 
                     alt="{{ couple.wife_name }}" class="avatar large">
                <h2>{{ couple.wife_name }}</h2>
                <p class="info">{{ couple.wife_age }}岁</p>
                <p class="info">{{ couple.wife_occupation }}</p>
            </div>
        </div>
        
        <div class="couple-story">
            <h3>他们的故事</h3>
            <p>{{ couple.story }}</p>
        </div>
        
        <div class="voting-section">
            <h3>你觉得他们应该？</h3>
            <div class="vote-buttons">
                <button class="btn vote-btn {% if user_vote and user_vote.vote_type == 'stay_together' %}voted{% endif %}" 
                        data-vote="stay_together">
                    <i class="fas fa-heart"></i> 继续走下去
                    <span class="vote-count stay-count">{{ stay_votes }}</span>
                </button>
                <button class="btn btn-danger vote-btn {% if user_vote and user_vote.vote_type == 'divorce' %}voted{% endif %}" 
                        data-vote="divorce">
                    <i class="fas fa-heart-broken"></i> 和平分手
                    <span class="vote-count divorce-count">{{ divorce_votes }}</span>
                </button>
            </div>
            {% if user_vote %}
            <p class="vote-tip">您已经投过票了，点击相同选项可以取消投票</p>
            {% endif %}
        </div>

        <div class="like-section">
            <button class="btn like-btn" data-couple-id="{{ couple.id }}">
                <i class="fas fa-thumbs-up"></i>
                <span class="like-count">{{ couple.likes_count }}</span>
            </button>
            <p class="like-tip">觉得他们的故事感人就点个赞吧</p>
        </div>
        
        <div class="comments-section">
            <h3>评论区</h3>
            {% if current_user.is_authenticated %}
            <div class="comment-form">
                <form id="comment-form" data-couple-id="{{ couple.id }}">
                    <textarea class="form-control" id="comment-input" placeholder="写下你的评论..."></textarea>
                    <button type="submit" class="btn">发表评论</button>
                </form>
            </div>
            {% else %}
            <p class="login-prompt">请<a href="{{ url_for('auth.login') }}">登录</a>后发表评论</p>
            {% endif %}
            
            <div class="comments-list">
                {% for comment in comments %}
                    {% if not comment.parent %}
                        {{ render_comment(comment, current_user=current_user) }}
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
window.isAuthenticated = {{ 'true' if current_user.is_authenticated else 'false' }};
window.loginUrl = "{{ url_for('auth.login') }}";
window.coupleId = {{ couple.id }};
</script>
{% endblock %}

{% block styles %}
<style>
/* 夫妻信息头部自适应样式 */
.couple-header {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.couple-info {
    flex: 1;
    min-width: 280px; /* 确保在小屏幕上有最小宽度 */
}

.couple-stats {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 投票按钮区域自适应样式 */
.vote-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin: 20px 0;
}

.vote-button {
    flex: 1;
    min-width: 200px; /* 设置最小宽度 */
    max-width: 300px; /* 设置最大宽度 */
    padding: 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

/* 响应式媒体查询 */
@media (max-width: 768px) {
    .couple-header {
        flex-direction: column;
    }
    
    .couple-info, .couple-stats {
        width: 100%;
    }
    
    .vote-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .vote-button {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .couple-header {
        padding: 15px;
    }
    
    .vote-button {
        padding: 12px;
        font-size: 14px;
    }
}
</style>
{% endblock %} 